<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>表单</title>
	<style type="text/css">
		body{
			background-color: green;
		}
	</style>
</head>
<body>
	
	<h1>表格布局的表单</h1>
	<h2>	基本要求：上下左右对齐</h2>
<hr />
<h3>注册表单</h3>
<form action="提交的服务器上的地址">
	<table >
		<tbody>
			<tr>
				<td>用户名：</td>
				<td><input type="text"  name="name" onblur="valiName(this)" value="用户"/></td>
				<td style="color:red;">
					<span id="msg" style="color:darkmagenta"></span>
					*请输入你的用户名，必须输入，由字母数字下划线组成 6－15位
				</td>
			</tr>
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="age"/></td>
				<td style="color:red;">*请输入年龄，必须输入数字</td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="pwd"/></td>
				<td style="color:red;">*请输入年龄，必须输入数字</td>
			</tr>
			<tr>
				<td>姓名：</td>
				<td>
					<input type="radio" checked name="sex"/>男
					<input type="radio" name="sex"/>女
				</td>
				<td style="color:red;">*请输入你的用户名，必须输入，由字母数字下划线组成 6－15位</td>
			</tr>
			<tr>
				<td>兴趣：</td>
				<td>
					<input type="checkbox" checked name="xingqu"/>文学
					<input type="checkbox" name="xingqu"/>电影
					<input type="checkbox" name="xingqu"/>篮球
					<input type="checkbox" name="xingqu"/>足球
				</td>
				<td style="color:red;">兴趣，可选</td>
			</tr>
			<tr>
				<td>个人简介：</td>
				<td colspan="2">
					<textarea name="content"  cols="40" rows="10">输入你的个人简介</textarea>
				</td>
			</tr>
			<tr>
				<td>地区：</td>
				<td colspan="2">
					<select name="area" >
						<option value="金水区">金水区</option>
						<option value="郑东新区">郑东新区</option>
						<option value="经开区">经开区</option>
						<option value="二七区">二七区</option>

					</select>
				</td>
			</tr>
			<tr>
				<td colspan="3">
					<input type="submit" value="注册" />
					<input type="reset" />
					<input type="button" onclick="changeColor()" value="改变颜色"/>
				</td>

			</tr>
		</tbody>
	</table>
	
	

</form>
<script type="text/javascript">
	function changeColor(){
		document.body.style.backgroundColor="blue";
	}
	//如何去获取要验证的元素
	//验证元素属性获取与判断
	//DOM操作
	function valiName(obj) {
		// alert("安徽");
		//用户名不能为空
		//用户名不能少于3个字符
		var txt=obj.value;
		var msg=document.getElementById("msg");
		if(txt.length==0){
			//alert("用户名不能为空");
			msg.innerText="用户名不能为空";
		}
		else
		{
			msg.innerText="";
		}
		if(txt.length >= 3){
			msg.innerText="";
		}
		else {
			msg.innerText="用户名不能少于3个字符";
		}

	}
</script>
</body>
</html>